<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/cola.css">
	<title>Cola-UI</title>
	<script src="../resources/jquery-2.1.3.js"></script>
	<script src="../resources/cola-ui/3rd.js"></script>
	<script src="../resources/cola-ui/semantic.js"></script>
	<script src="../resources/cola-ui/cola.js"></script>
	<script src="../resources/cola-ui/i18n/zh/cola.js"></script>
	<script type="text/javascript">
		cola(function (model) {
			model.set("languages", [
				{name: "Javascript"},
				{name: "Java"},
				{name: "C"},
				{name: "C++"},
				{name: "Coffee"},
				{name: "Ruby"},
				{name: "R"},
				{name: "Python"},
				{name: "Pascal"}
			]);

			model.action({
				deleteLanguage: function (language) {
					language.remove();
				}
			});

			model.widgetConfig({
				listSimple: {
					$type: "listView"
				},
				listTemplate: {
					$type: "listView",
					bind: "language in sort(languages,sortParam)",
					group: true,
					indexBar: true,
					height: 260,
					columns: "row 2 4",
					getGroupString: function (self, arg) {
						var name = arg.item.get("name");
						if (name) arg.result = name.charAt(0).toUpperCase();
					}
				}
			});
		});
	</script>
</head>
<body style="padding: 1em">
<div id="listTemplate">
	<template name="default">
		<li>
			<div c-widget="button; caption:Delete; class:negative; click:{{deleteLanguage(language)}}; size:mini"></div>
			<span c-bind="language.name"></span>
		</li>
	</template>
	<template name="group-header">
		<li>
			<span c-bind="group.name"></span>
		</li>
	</template>
</div>

</body>
</html>
